<template>
	<view class="content">
		<view class="albums-box" v-for="(item,index) in list" :key="item.index">
			<view class="albums-box-title">
				<text>{{item.title}}</text>
			</view>
			<view class="in-albums-box">
				<view class="album" @tap="toInfo(item)">
					<view class="image-box">
						<!-- 首次显示，第二次打开页面（也就是读缓存）不显示 -->
						<view :style="{ 'background-image': 'url(' + smImg(item.imgsrc) + ')' }"></view>

						<!-- 缓存正常 -->
						<image :src="smImg(item.imgsrc)" mode="aspectFill" lazy-load="true"></image>
					</view>
					<view class="album-text">
						<text>{{item.title}}</text>
						<text>{{item.number}}张</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			smImg(url) {
				let real_img = url + '?x-oss-process=image/resize,l_200'
				const cached = uni.getStorageSync(real_img)
				if (cached) {
					console.log(url + "已缓存为：" + cached)
					return cached
				} else {
					// console.log("未缓存,延迟下载")
					setTimeout(() => {
						uni.downloadFile({
							url: url
						}).then(res => {
							if (res[1].statusCode == 200) {
								uni.saveFile({
									tempFilePath: res[1].tempFilePath,
									success: function(res) {
										console.log('下载完成：' + res.savedFilePath);
										uni.setStorageSync(real_img, res.savedFilePath)
									}
								});

							} else {
								return Promise.reject('下载临时文件失败')
							}
						}).catch(info => {
							console.log(info);
						})
					}, 2000)
					return real_img
				}
			},
			toInfo(e) {
				// console.log("点击", e)
				uni.navigateTo({
					url: `/pages/familyPhotoAlbum/album-info/album-info?id=` + e.id + `&title=` + e
						.title +
						`&number=` + e.number
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.albums-box {
		width: 95%;

	}

	.albums-box-title {
		height: 100rpx;
		position: relative;
		font-size: 44rpx;
		margin-bottom: 30rpx;
	}

	.albums-box-title::after {
		content: "";
		background-color: #E17564;
		width: 100%;
		height: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.album {

		width: 288rpx;
		height: 344rpx;
		overflow: hidden;

		font-size: 28rpx;

		margin-right: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		/* border: #007AFF solid 1px; */
	}

	.image-box {
		width: 288rpx;
		height: 280rpx;
		overflow: hidden;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		/* border: #007AFF solid 1px; */
		box-shadow: #959595 0rpx 3rpx 3rpx;
	}

	image {
		width: 288rpx;
		height: 280rpx;
	}

	.album-text {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.in-albums-box {

		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
</style>
